<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script src="./mock.js"></script>
    <script src="./demoMock.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      button {
        margin: 0 10px;
      }

      li {
        list-style: none;
        margin: 8px 0;
        background-color: #ccc;
        width: 500px;
        margin: 0 auto;
        padding: 4px 20px;
      }

      ul {
        padding: 20px 0;
      }

      li:hover {
        background-color: red;
      }

      .box {
        width: 600px;
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <span>f12 打开调试</span>
      <br />
      <br />
      <hr />
      <br />
      <div>
        <button class="reqGet">get请求 商品列表</button>
        <button class="reqBuy">get请求 购物车</button>
        <button class="reqPost">post请求 表单</button>
      </div>
      <div class="main">
        <ul>
          <li class="list"></li>
        </ul>
      </div>
    </div>

    <script>
      // get请求 封装   商品列表
      function getInfo(method, url) {
        $.ajax({
          url: url,
          type: method,
          dataType: "json",
        }).then((data, status) => {
          console.log(data); // 请求结果
          var keys = Object.keys(data); // 得到key
          var values = Object.values(data); // 得到value值
          $("li").remove(); // 点击get请求后 删除li 标签 (以免li标签叠加)
          for (var i = 0; i < keys.length; i++) {
            var k = keys[i]; // 每个key值
            var v = values[i]; // 每个value 值
            $("ul").append(`<li>${k} : ${v}</li>`); // 动态添加新的li 到ul里面去
          }
        });
      }
      $(".reqGet").click(() => {
        // 点击获取新信息
        this.getInfo("get", "http://list.com");
      });

      // ------------------------------------------------------------------------------------
      function buys(url, method) {
        return new Promise((resolve, reject) => {
          $.ajax({
            url: url,
            type: method,
            dataType: "json",
          }).then((res) => {
            if (res) {
              // 请求后 有返回有结果
              return resolve(res);
            } else {
              return reject(res);
            }
          });
        });
      }

      // 点击购物车按钮
      $(".reqBuy").click(() => {
        buys("http://buy.com", "get")
          .then((res) => {
            // 发送请求
            if (res.user) {
              console.log(res.user); // 请求到的结果
              for (let key of res.user) {
                console.log("key", key);
                let k = Object.keys(key); // 把key值放到数组里
                let v = Object.values(key); // 把value值放到数组里
                $("li").remove(); // 点击get请求后 删除li 标签 (以免li标签叠加)
                for (var i = 0; i < k.length; i++) {
                  var keys = k[i];
                  var Value = v[i];
                  $("ul").append(`<li>${keys} : ${Value}</li>`); // 动态添加新的li 到ul里面去
                }
              }
            }
          })
          .catch((res) => {
            console.log(res);
          });
      });

      // ------------------------------------------------------------------------------------

      // post请求
      $(".reqPost").click(() => {
        $.ajax({
          url: "http://fromdata.com",
          type: "post",
          dataType: "json",
          data: {
            account: 888,
            pwd: "abc123",
          },
        }).then((data, status) => {
          console.log(JSON.stringify(data));
        });
      });
    </script>
  </body>
</html>
